extends /_layout/default.pug

block view
  .fade-in
    .row
      .col-md-12
        .card
          .card-header
            | 3d Switch
          .card-body
            label.c-switch.c-switch-3d.c-switch-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-3d.c-switch-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-3d.c-switch-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-3d.c-switch-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-3d.c-switch-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-3d.c-switch-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-3d.c-switch-primary
              input.c-switch-input(type='checkbox', checked='', disabled)
              span.c-switch-slider
            label.c-switch.c-switch-3d.c-switch-primary
              input.c-switch-input(type='checkbox', disabled)
              span.c-switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch default
          .card-body
            label.c-switch.c-switch-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch default - pills
          .card-body
            label.c-switch.c-switch-pill.c-switch-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch outline
          .card-body
            label.c-switch.c-switch-outline-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-outline-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-outline-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-outline-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-outline-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-outline-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch outline - pills
          .card-body
            label.c-switch.c-switch-pill.c-switch-outline-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-outline-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-outline-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-outline-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-outline-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-outline-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch opposite
          .card-body
            label.c-switch.c-switch-opposite-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-opposite-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-opposite-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-opposite-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-opposite-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-opposite-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch opposite - pills
          .card-body
            label.c-switch.c-switch-pill.c-switch-opposite-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-opposite-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-opposite-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-opposite-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-opposite-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
            label.c-switch.c-switch-pill.c-switch-opposite-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text
          .card-body
            label.c-switch.c-switch-label.c-switch-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text - pills
          .card-body
            label.c-switch.c-switch-label.c-switch-pill.c-switch-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text outline
          .card-body
            label.c-switch.c-switch-label.c-switch-outline-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-outline-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-outline-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-outline-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-outline-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-outline-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text outline - pills
          .card-body
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text opposite
          .card-body
            label.c-switch.c-switch-label.c-switch-opposite-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-opposite-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-opposite-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-opposite-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-opposite-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-opposite-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text opposite - pills
          .card-body
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon
          .card-body
            label.c-switch.c-switch-label.c-switch-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon - pills
          .card-body
            label.c-switch.c-switch-label.c-switch-pill.c-switch-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon outline
          .card-body
            label.c-switch.c-switch-label.c-switch-outline-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-outline-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-outline-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-outline-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-outline-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-outline-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon outline - pills
          .card-body
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-outline-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon opposite
          .card-body
            label.c-switch.c-switch-label.c-switch-opposite-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-opposite-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-opposite-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-opposite-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-opposite-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-opposite-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon opposite - pills
          .card-body
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-primary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-secondary
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-success
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-warning
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-info
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
            label.c-switch.c-switch-label.c-switch-pill.c-switch-opposite-danger
              input.c-switch-input(type='checkbox', checked='')
              span.c-switch-slider(data-checked!='&#x2713', data-unchecked!='&#x2715')
      // /.col
      .col-md-12
        .card
          .card-header
            | Sizes
          .card-body.p-0
            table.table.table-hover.table-striped.table-align-middle.mb-0
              thead
                tr
                  th Size
                  th Example
                  th CSS Class
              tbody
                tr
                  td
                    | Large
                  td
                    label.c-switch.c-switch-lg.c-switch-3d.c-switch-primary
                      input.c-switch-input(type='checkbox', checked='')
                      span.c-switch-slider
                  td
                    | Add following class
                    code .c-switch-lg
                tr
                  td
                    | Normal
                  td
                    label.c-switch.c-switch-3d.c-switch-primary
                      input.c-switch-input(type='checkbox', checked='')
                      span.c-switch-slider
                  td
                    | -
                tr
                  td
                    | Small
                  td
                    label.c-switch.c-switch-sm.c-switch-3d.c-switch-primary
                      input.c-switch-input(type='checkbox', checked='')
                      span.c-switch-slider
                  td
                    | Add following class
                    code .c-switch-sm
      // /.col
    // /.row
